<template>
  <div class="empty-state">
    <div class="empty-icon">
      <el-icon v-if="icon"><component :is="icon" /></el-icon>
      <div v-else class="default-empty-icon">
        <svg viewBox="0 0 64 41" xmlns="http://www.w3.org/2000/svg">
          <g transform="translate(0 1)" fill="none" fill-rule="evenodd">
            <ellipse fill="#f5f5f5" cx="32" cy="33" rx="32" ry="7"></ellipse>
            <g fill-rule="nonzero" stroke="#d9d9d9">
              <path d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"></path>
              <path d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z" fill="#fafafa"></path>
            </g>
          </g>
        </svg>
      </div>
    </div>
    <div class="empty-content">
      <div class="empty-title">{{ title }}</div>
      <div v-if="description" class="empty-description">{{ description }}</div>
    </div>
    <div v-if="$slots.action" class="empty-action">
      <slot name="action"></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'EmptyState',
  props: {
    icon: {
      type: [String, Object],
      default: null
    },
    title: {
      type: String,
      default: '暂无数据'
    },
    description: {
      type: String,
      default: ''
    }
  }
}
</script>

<style lang="scss" scoped>
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;

  .empty-icon {
    margin-bottom: 24px;

    .el-icon {
      font-size: 64px;
      color: #dcdfe6;
    }

    .default-empty-icon {
      width: 64px;
      height: 41px;
      opacity: 0.6;

      svg {
        width: 100%;
        height: 100%;
      }
    }
  }

  .empty-content {
    margin-bottom: 24px;

    .empty-title {
      font-size: 16px;
      font-weight: 500;
      color: #909399;
      margin-bottom: 8px;
    }

    .empty-description {
      font-size: 14px;
      color: #c0c4cc;
      line-height: 1.5;
      max-width: 400px;
    }
  }

  .empty-action {
    .el-button {
      padding: 8px 20px;
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .empty-state {
    padding: 40px 16px;

    .empty-icon {
      margin-bottom: 20px;

      .el-icon {
        font-size: 48px;
      }

      .default-empty-icon {
        width: 48px;
        height: 31px;
      }
    }

    .empty-content {
      margin-bottom: 20px;

      .empty-title {
        font-size: 14px;
      }

      .empty-description {
        font-size: 13px;
      }
    }
  }
}
</style>
